<template>
  <div class="my-root-div">
    <div class="my-head">
      <nut-row class="icons-list">
        <nut-col :span="20">
          <div class="flex-content">
            <h4 @click="switchPicker('isVisible1')">{{ date[0] }} 至 {{ date[1] }}</h4>
          </div>
          <nut-calendar
            :is-visible="isVisible1"
            :default-value="date"
            :start-date="null"
            :end-date="null"
            type="range"
            @close="switchPickerClose('isVisible1')"
            @choose="setChooseValue"
          />
        </nut-col>
        <nut-col :span="4">
          <div class="flex-content flex-content-light">
            <h4>
              <a @click="query()"><nut-icon type="search" /></a>
            </h4>
          </div>
        </nut-col>
      </nut-row>
    </div>
    <div>
      <div class="count-div">
        <div class="biaoti" @click="toDetail('ALL')">客户数</div>
        <nut-row>
          <nut-col :span="8">
            <div class="flex-content">
              <nut-cell>
                <span slot="title">{{ pdata.addDmsTotal }}</span>
                <span slot="sub-title">DMS新增</span>
              </nut-cell>
            </div>
          </nut-col>
          <nut-col :span="8">
            <div class="flex-content">
              <nut-cell>
                <span slot="title">{{ pdata.addWxTotal }}</span>
                <span slot="sub-title">企业微信好友数</span>
              </nut-cell>
            </div>
          </nut-col>
          <nut-col :span="8">
            <div class="flex-content">
              <nut-cell>
                <span slot="title">{{ pdata.addWxgroupTotal }}</span>
                <span slot="sub-title">企业微信群个数</span>
              </nut-cell>
            </div>
          </nut-col>
        </nut-row>
      </div>
      <div class="detail-div">
        <div class="biaoti" @click="toDetail('CLUE')">线索</div>
        <nut-cell :desc="pdata.addClueDmsTotal " title="DMS新增数量" />
        <nut-cell :desc="pdata.addClueWxTotal" title="企业微信好友数" />
        <nut-cell :desc="pdata.addClueWxgroupTotal" title="企业微信群个数" />
      </div>
      <div class="detail-div">
        <div class="biaoti" @click="toDetail('POTENTIAL')">潜客</div>
        <nut-cell :desc="pdata.addPotentialDmsTotal" title="DMS新增数量" />
        <nut-cell :desc="pdata.addPotentialWxTotal" title="企业微信好友数" />
        <nut-cell :desc="pdata.addPotentialWxgroupTotal" title="企业微信群个数" />
      </div>
      <div class="detail-div">
        <div class="biaoti" @click="toDetail('DEAL')">成交</div>
        <nut-cell :desc="pdata.addDealDmsTotal" title="DMS新增数量" />
        <nut-cell :desc="pdata.addDealWxTotal" title="企业微信好友数" />
        <nut-cell :desc="pdata.addDealWxgroupTotal" title="企业微信群个数" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  doLogin,
  sdkConfig
} from '@/api/admin/auth/wechat/wechatAuthentication'
import {
  querySalesAdvisorCustomCount
} from '@/api/admin/org/weChat/wechatReportQuery'
export default {
  name: 'SalesAdvisorCustomCount',
  data() {
    return {
      isVisible1: false,
      date: [],
      pdata: {
        addDmsTotal: '0',
        addWxTotal: '0',
        addWxgroupTotal: '0',
        addClueDmsTotal: '0',
        addClueWxTotal: '0',
        addClueWxgroupTotal: '0',
        addPotentialDmsTotal: '0',
        addPotentialWxTotal: '0',
        addPotentialWxgroupTotal: '0',
        addDealDmsTotal: '0',
        addDealWxTotal: '0',
        addDealWxgroupTotal: '0'
      }
    }
  },
  mounted() {
    // 隐藏自带的右上角操作
    this.hideWxOption()
    // 初始化日期
    this.date.push(sessionStorage.getItem('startDate') ? sessionStorage.getItem('startDate') : this.getDate(0))
    this.date.push(sessionStorage.getItem('endDate') ? sessionStorage.getItem('endDate') : this.getDate(0))
    // 防止刷新进入
    if (sessionStorage.getItem('WC_USERID')) {
      this.query()
    } else {
      this.getUserId()
    }
  },
  methods: {
    hideWxOption() {
      const that = this
      sdkConfig({ url: window.location.href.split('#')[0], crop_agentId: that.$route.query.state }).then(res => {
        that.$wx.config({
          beta: true,
          debug: false,
          appId: res.corpid,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ['hideOptionMenu']
        })
        that.$wx.ready(function() {
          that.$wx.hideOptionMenu()
        })
      })
    },
    getUserId() {
      const that = this
      doLogin({ agentId: that.$route.query.state, code: that.$route.query.code }).then(res => {
        sessionStorage.setItem('WC_USERID', res)
        that.query()
      })
    },
    query() {
      const that = this
      this.loading = true
      querySalesAdvisorCustomCount({
        user_id: sessionStorage.getItem('WC_USERID'),
        start_date: that.date[0],
        end_date: that.date[1]
      }).then(res => {
        if (res) {
          that.pdata = res
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    toDetail(ctype) {
      this.$router.push({
        path: '/weChat/report/salesAdvisorCustomDetail',
        name: 'SalesAdvisorCustomDetail',
        params: {
          ctype: ctype,
          date: this.date
        }
      })
    },
    switchPicker(param) {
      this[`${param}`] = true
    },
    switchPickerClose(param) {
      console.log('close:' + param)
      this[`${param}`] = false
    },
    setChooseValue(param) {
      this.date = [...[param[0][3], param[1][3]]]
      this.isVisible1 = false
    },
    getDate(n) {
      const ss = 24 * 60 * 60 * 1000
      const timestamp = new Date().getTime()
      const date = new Date(ss * n + timestamp)
      const seperator1 = '-'
      const year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      const currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    }
  }
}
</script>

<style lang="scss">
.my-root-div{
   padding: 5px 10px;
}
.my-head{
  background-color: #f6f6f6;
}
.my-head H4{
  text-align: center;
  font-weight: 100;
  margin-block-start: 0.88em;
  margin-block-end: 0.88em;
}
.count-div{
  text-align: center;
}
.count-div .biaoti{
  text-align: center;
  font-size: 15px;
  background-color: #eaeaea;
  margin-top: 5px;
  padding: 10px;
}
.detail-div{
  .nut-cell{
    .nut-cell-box{
      min-height: 40px;
    }
  }
}
.detail-div .biaoti{
  text-align: center;
  font-size: 13px;
  background-color: #ebeef5;
  margin-top: 2px;
  padding: 10px;
}
</style>
